<script>
import moment from "moment";

export default {
  name: "brandManagement",
  data() { //data要写成函数的形式  作用：实现数据隔离，互不影响
    return {
      carList: [
        {
          id: '1',
          name: '奔驰',
          Ctime: new Date()
        },
        {
          id: '2',
          name: '宝马',
          Ctime: new Date()
        }
      ],
      carId: '',
      carName: '',
      keyWord: '',
      delIndex: '',
      oldName: '',
      newName: '',
      modifyIndex: ''
    }
  },
  methods: {
    // 添加
    add() {
      // console.log('添加')
      if (this.carList.find(item => item.id === this.carId)) {
        alert('id重复')
      } else {
        this.carList.push({
          id: this.carId,
          name: this.carName,
          Ctime: new Date()
        })
      }
      // 转成三目表达式
      /*this.carList.find(item => item.id === this.carId?alert('id重复'):this.carList.push({
        id: this.carId,
        name: this.carName,
        Ctime: new Date()
      })*/

      this.carId = '';
      this.carName = '';


    },
    // 删除
    del(item) {
      console.log(this.carList.indexOf(item))
      // this.carList.splice(this.carList.indexOf(item), 1)
      this.delIndex = this.carList.indexOf(item)
    },
    // 搜索
    search() {
      // console.log(this.keyWord)
      return this.carList.filter(item => item.name.includes(this.keyWord))
    },
    //确定删除
    confirmDel() {
      this.carList.splice(this.delIndex, 1)
    },
    //   修改
    modify(item) {
      console.log(item.name);
      this.oldName = item.name;
      this.modifyIndex = this.carList.indexOf(item)
    },
    //   确认修改
    confirmModify() {
      this.carList[this.modifyIndex].name = this.newName
      this.newName = ''
    }
  },
  filters: {
    filterTime(data, format) {
      console.log(data, format)
      let Y = data.getFullYear().toString().padStart(2,0);
      let M = (data.getMonth() + 1).toString().padStart(2,0);
      let D = data.getDate().toString().padStart(2,0)

      // 补零函数
      /*if (M < 10) {
        M = '0' + 'M'
      }*/

      //padStart  str.padStart(4,0)的意思：str如果不够4位，则在前面补0
      //padEnd同理，往后补
      /*let str = '5'
      console.log(str.padStart(4, 0))*/
      // return `${Y}-${M}-${D}`;
      // return format.replace('YYYY',Y).replace('MM',M).replace('DD',D)

      // 使用moment工具库
      console.log(moment(data).format(format))
      return moment(data).format(format)


    }
  }
}
</script>

<template>
  <div>
    品牌管理
    <div class="card container">
      <div class="card-header">添加品牌</div>

      <div class="card-body">
        <form class="form-inline" action="">
          <label for="email" class="mr-sm-2">ID:</label>
          <input type="text" class="form-control mb-2 mr-sm-2" v-model="carId">
          <label for="pwd" class="mr-sm-2">Name:</label>
          <input type="text" class="form-control mb-2 mr-sm-2" v-model="carName">
          <button type="button" class="btn btn-primary mb-2" @click="add">添加</button>
          <label for="pwd" class="mr-sm-2">搜索关键字:</label>
          <input type="text" class="form-control mb-2 mr-sm-2" v-model="keyWord" @input="search">
        </form>
      </div>

      <div class="card-footer">
        <table class="table table-striped">
          <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Operation</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item) in search()" :key="item.id ">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.Ctime|filterTime('YYYY-MM-DD h:mm:ss') }}</td>
<!--            <td>{{ item.Ctime|filterTime('yyyy年mm月dd日') }}</td>-->
            <td>
              <button type="button" class="btn btn-outline-danger" @click="del(item)" data-toggle="modal"
                      data-target="#delModal">删除
              </button>
              <button type="button" class="btn btn-outline-danger" @click="modify(item)" data-toggle="modal"
                      data-target="#modifyModal">修改
              </button>
            </td>
          </tr>

          </tbody>
        </table>
      </div>


      <!-- 确认删除的模态框 -->
      <div class="modal fade" id="delModal">
        <div class="modal-dialog">
          <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
              <h4 class="modal-title">确认删除</h4>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
              确定删除吗？
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="confirmDel">确定</button>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>

          </div>
        </div>
      </div>

      <!-- 修改的模态框-->
      <div class="modal fade" id="modifyModal">
        <div class="modal-dialog">
          <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
              <p>原来的名字：{{ oldName }}</p>
              <p>新名字：<input type="text" v-model="newName"></p>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="confirmModify">确定</button>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">

</style>